<template>
  <div class="nav-bar">
    <h2>酒店管理系统</h2>
    <ul>
      <li><router-link to="/rooms">房间管理</router-link></li>
      <li><router-link to="/guests">客人管理</router-link></li>
      <li><router-link to="/bookings">预订管理</router-link></li>
      <li><router-link to="/staff">员工管理</router-link></li>
      <li><router-link to="/services">服务管理</router-link></li>
      <li><router-link to="/finance">财务统计</router-link></li>
      <li><router-link to="/room-status">客房状态</router-link></li>
      <li>
        <button @click="handleLogin">{{ isAuthenticated ? '退出登录' : '登录' }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  computed: {
    isAuthenticated() {
      return localStorage.getItem('isAuthenticated') === 'true';
    }
  },
  methods: {
    handleLogin() {
      if (this.isAuthenticated) {
        localStorage.removeItem('isAuthenticated');
        this.$router.push('/login');
      } else {
        this.$router.push('/login');
      }
    }
  }
}
</script>

<style scoped>
.nav-bar {
  width: 200px;
  background: #2c3e50;
  color: white;
  height: 100vh;
  padding: 20px;
  position: fixed;
}

.nav-bar h2 {
  margin-bottom: 30px;
}

.nav-bar ul {
  list-style: none;
  padding: 0;
}

.nav-bar li {
  margin: 15px 0;
}

.nav-bar a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.nav-bar a:hover {
  color: #42b983;
}

.router-link-exact-active {
  color: #42b983 !important;
  font-weight: bold;
}

.nav-bar button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.nav-bar button:hover {
  color: #42b983;
}
</style>